<template>
	<scroll-view scroll-y="true" class="scrollbox" @scrolltolower="lower" enable-back-to-top="true"
		lower-threshold="112">
		<!-- <view class="cu-bar bg-white solid-bottom fixed">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 筛选条件
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="DrawerModalL">筛选</button>
			</view>
		</view> -->
		<view class="cu-list menu-avatar">
			<view class="cu-item" v-for="(item,index) in list" :key="index">
				<!-- <view class="cu-avatar radius lg" :style="'background-image:url('+ item.avatar +');'"></view> -->
				<!-- #ifdef H5 -->
				<view class="cu-avatar radius lg" v-lazy:background-image="{src:item.avatar}" @tap="previewImage(index)"></view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image class="cu-avatar radius lg" :lazy-load="true" :src="item.avatar" @tap="previewImage(index)"></image>
				<!-- #endif -->
				<view class="content" @tap="toDetail(item.account_id)">
					<view class="text-grey">
						<view class="text-cut padding-right">{{item.nick_name}}</view>
						<view class="cu-tag round bg-olive lg" style="letter-spacing: 1px;">{{calculateAge(item.birthday)}}岁</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> -->
							<text class="cuIcon-locationfill text-olive margin-right-xs"></text> {{item.region[0]}} {{item.region[1]}} {{item.region[2]}}
						</view> 
					</view>
				</view>
				<view class="action">
					<!-- <view class="text-grey text-xs">{{timestampToString(item.updated_at)}}</view> -->
					<view class="cu-tag round bg-grey sm" v-if="item.status == 1"></view>
					<view class="cu-tag round bg-red sm" v-if="item.status == 0"></view>
					<view class="cu-tag round bg-green sm" v-if="item.status == 2"></view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { objectAuditList } from '../../api/audit';
	export default {
		data() {
			return {
				list: [],
				page: 1,
				is_loading: false,
			};
		},
		created() {
			// 展示列表
			objectAuditList().then(res => {
				// console.log(res)
				if (res != undefined && res.list != null) {
					this.list = res.list
					this.loadList()
				}
			}).catch(err => {
				console.log(err)
			});
		},
		methods: {
			loadList() {
				// 当数据没填充整个高度时需要再次加载
				setTimeout(()=>{
					let that = this
					uni.getSystemInfo({
						success(res) {
							let screenHeight = res.screenHeight
							uni.createSelectorQuery().select('.cu-list').boundingClientRect(data => {
								if (screenHeight - data.height > 50) {
									
									// 数据没铺满继续加载
									that.page++
									objectAuditList({page: that.page}).then(res2 => {
										// console.log(res2)
										if (res != undefined && res2.list != null) {
											that.list = that.list.concat(res2.list)
										}
									}).catch(err => {
										console.log(err)
									});
									
								}
							}).exec()
						}
					})
				},200)
			},
			previewImage(index) {
				uni.previewImage({
					indicator: "none",
					loop: false,
					urls: [this.list[index].avatar],
					longPressActions: {},
					sizeType: ['original']
				})
			},
			toDetail(id) {
				uni.navigateTo({
				    url: '/pages/audit/detail?id=' + id // 跳转到对应路径的页面
				});
			},
			lower() {
				if (!this.is_loading) {
					this.is_loading = true
					console.log('触底加载')
					this.page++
					objectAuditList({page: this.page}).then(res => {
						// console.log(res)
						if (res != undefined && res.list != null) {
							this.list = this.list.concat(res.list)
						}
					}).catch(err => {
						console.log(err)
					});
					this.is_loading = false
				}
			},
			calculateAge(birthDateStr) {
				var birthDate = new Date(birthDateStr)
				var currentDate = new Date();
				var birthYear = birthDate.getFullYear();
				var birthMonth = birthDate.getMonth();
				var birthDayOfMonth = birthDate.getDate();
				var currentYear = currentDate.getFullYear();
				var currentMonth = currentDate.getMonth();
				var currentDayOfMonth = currentDate.getDate();
				 
				var age = currentYear - birthYear;
				if (currentMonth < birthMonth || (currentMonth == birthMonth && currentDayOfMonth < birthDayOfMonth)) {
				    age--;
				}
				return age;
			},
			timestampToString(timestamp) {
				var date = new Date(timestamp * 1000); // 由于时间戳通常以秒为单位，所以我们需要乘以1000
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
				var day = date.getDate();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				 
				// 补零操作
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				// seconds = seconds < 10 ? '0' + seconds : seconds;
				 
				return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
			}
		}
	}
</script>

<style scoped>
	/* h5不用 */
	/* page {
		padding-top: 50px;
	} */
	.scrollbox {
		/* height: 100vh; */
		/* height: 80vh; */
		/* padding-top: 45px; */
		height: calc(100vh - 10px);
	}
</style>